<template>
  <div class="imgContainer">
    <img class="imgofSongList" :src="props.songList.picUrl" alt="" />
  </div>

  <span class="textofSongList">{{ props.songList.name }}</span>
  <div class="playCountofSongList">
    <SvgIcon icon=""></SvgIcon> {{ props.songList.playCount }}
  </div>
</template>

<script lang="ts">
export default {
  name: '',
}
</script>

<script lang="ts" setup>
import { songListItem } from '@/api/model/songList'
import { ref, reactive } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'

const props = defineProps<{ songList: songListItem }>()
</script>

<style scoped>
.imgContainer {
  position: relative;
}
.playCountofSongList {
  position: absolute;

  width: 100%;
  height: 27px;

  bottom: 0;

  background: rgba(0, 0, 0, 0.8);
}
</style>
